<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/javaweb17/back/element-ui/lib/theme-chalk/index.css">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>

</head>
<body>
    <div id="app">
        <!--完整框架布局-->
        <el-container style="height: 725px; border: 1px solid #eee">
            <!--侧边栏-->
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu :default-openeds="['1']">
                    <el-submenu index="1">
                     <template slot="title"><i class="el-icon-delete-solid"></i>学生管理系统</template>
<!--                        <el-menu-item-group>-->
<!--                            <template slot="title">人员管理</template>-->
<!--                            <el-menu-item index="1-1">员工信息</el-menu-item>-->
<!--                        </el-menu-item-group>-->
                        <el-submenu index="1-1">
                            <template slot="title">学生日常管理</template>
                            <el-menu-item index="1-1-1" @click="repalceUrl('student_info.html')">学生信息</el-menu-item>
                            <el-menu-item index="1-1-2" @click="repalceUrl('student_subject.html')">学生科目</el-menu-item>
                            <el-menu-item index="1-1-3" @click="repalceUrl('student_scope.html')">学生成绩</el-menu-item>
                        </el-submenu>
                    </el-submenu>
<!--                    <el-submenu index="2">-->
<!--                        <template slot="title"><i class="el-icon-menu"></i>导航二</template>-->
<!--                        <el-menu-item-group>-->
<!--                            <template slot="title">分组一</template>-->
<!--                            <el-menu-item index="2-1">选项1</el-menu-item>-->
<!--                            <el-menu-item index="2-2">选项2</el-menu-item>-->
<!--                        </el-menu-item-group>-->
<!--                        <el-menu-item-group title="分组2">-->
<!--                            <el-menu-item index="2-3">选项3</el-menu-item>-->
<!--                        </el-menu-item-group>-->
<!--                        <el-submenu index="2-4">-->
<!--                            <template slot="title">选项4</template>-->
<!--                            <el-menu-item index="2-4-1">选项4-1</el-menu-item>-->
<!--                        </el-submenu>-->
<!--                    </el-submenu>-->
                </el-menu>
            </el-aside>

            <!--右边部分-->
            <el-container>
                <!--右边导航-->
                <el-header style="text-align: right; font-size: 12px">
                    <el-dropdown>
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>查看个人信息</el-dropdown-item>
                            <el-dropdown-item>查看通知</el-dropdown-item>
                            <el-dropdown-item>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span>{{loginUserName}}</span>
                </el-header>
                <!--主体内容-->
                <el-main>
                   <!--显示内容部分 根据菜单点击不同的内容切换显示不同的页面-->
                    <iframe :src="url" width="100%" height="100%" scrolling="no" border="0" frameborder="0"></iframe>

                </el-main>
            </el-container>
        </el-container>

    </div>
</body>
</html>
<script src="/javaweb17/back/js/vue.js"></script>
<script src="/javaweb17/back/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                //切换的路径
                url:'student_info.html',
                //登录名
                loginUserName:''

            }
        },
        methods:{
            repalceUrl(ref){
                this.url=ref;
            }
        },
        created(){//创建完毕执行的生命周期
            //去除存储的登录用户名
            this.loginUserName = localStorage.getItem("loginStudent")
        }
    });
</script>
